<template>
	<view class="mainCon">
		<!-- <view class="tabHead" >
			<view class="tabItem" :class="current==index?'active':''" v-for="(item,index) in tabList"
				@click="tapChange(index)">
				{{item}}
			</view>
		</view> -->
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="申请企业">
					<u-input v-model="formData.applypeoper" />
				</u-form-item> 
				<u-form-item label="船舶名称">
					<u-input v-model="formData.bargenam" />
				</u-form-item>
				<u-form-item label="审核状态" label-width="160">
					<u-input type="select" :select-open="shShow" v-model="formData.statusLabel"
						placeholder="审核状态" @click="shShow = true"></u-input>
				</u-form-item>
				<u-form-item label="结算状态" label-width="160">
					<u-input type="select" :select-open="jsShow" v-model="formData.payStatusLabel"
						placeholder="结算状态" @click="jsShow = true"></u-input>
				</u-form-item>
			</u-form> 
			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="onSearch">查询</u-button>  
			</view>
		</view>
		<view style="height: 430rpx;"></view>
		<view class="orderList">
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderHead">
					<view class="headcell">
						<view class="dateLabel">
							船舶名称 : {{ item.bargenam }}
						</view>
					</view>
					<view class="headcell">
						<view class="dateLabel">
							结算状态 : {{ item.payStatus }}
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="infoCell">
						<view class="labelName">
							申请企业 : 
						</view>
						<view class="infoCon">
							{{ item.applypeoper }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							船舶长度 : 
						</view>
						<view class="infoCon">
							{{item.shiplength }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							船舶宽度 : 
						</view>
						<view class="infoCon">
							<!-- {{ $u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss') }} -->
							{{ item.shipwidth }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							报港装载吨位 : 
						</view>
						<view class="infoCon">
							{{ item.ybton }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							来港 : 
						</view>
						<view class="infoCon">
							{{ item.fport ? item.fport : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							往港 : 
						</view>
						<view class="infoCon">
							{{ item.tport ? item.tport : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							装卸标志 : 
						</view>
						<view class="infoCon">
							{{ item.jobWay ? item.jobWay : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							联系电话 : 
						</view>
						<view class="infoCon">
							{{ item.tel ? item.tel : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							审核状态 : 
						</view>
						<view class="infoCon">
							{{ item.status }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							审核时间 : 
						</view>
						<view class="infoCon">
							{{ item.check2Time ? $u.timeFormat(item.check2Time, 'yyyy-mm-dd') : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							核销时间 : 
						</view>
						<view class="infoCon">
								<!-- {{ $u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss') }} -->
							{{ item.checktime ? $u.timeFormat(item.checktime, 'yyyy-mm-dd') : ' ' }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							作废时间 : 
						</view>
						<view class="infoCon">
							{{ item.repealtime ? $u.timeFormat(item.repealtime, 'yyyy-mm-dd') : ' ' }}
						</view>
					</view>	
					
					<view style="display: flex; justify-content: center; margin-top: 8px;">
						<view class="btn" @click="toMoreInfo(item)">查看</view>
						<view class="btn" @click="toThroughSW(item)" v-show="item.status == '待商务部审核'">商务部审核</view>
						<view class="btn" @click="toThrough(item)" v-show="item.status == '待生产部核销'">生产部核销</view>
						<view class="btn" @click="toParse(item)">作废</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<u-modal v-model="show" :content="content" :title="title" :show-cancel-button="true"
			@confirm="throughConfirm" @cancel="show=false">
			<!-- <view style="text-align: center;">{{ content }}</view> -->
		</u-modal>
		<view style="margin-top: 200rpx;" v-if="orderList.length ===0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<u-popup v-model="showInfo" width="100%" height="100%" :closeable="true">
			<view style="margin: 15px;">
				<view style="text-align: center;font-size: 20px;
						font-weight: 700;">
					详细信息
				</view>
				<view class="content">
					<view class="font">申请企业：{{ carItem.applypeoper  ? carItem.applypeoper: ' ' }}</view>
					<view class="font">船代码：{{ carItem.bargenam  ? carItem.bargenam: ' ' }}</view>
					<view class="font">船舶曾用名：{{ carItem.oldbargenam  ? carItem.oldbargenam: ' ' }}</view>
					<view class="font">货主：{{ carItem.customer  ? carItem.customer: ' ' }}</view>
					<view class="font">货种：{{ carItem.cargo  ? carItem.cargo: ' ' }}</view>
					<view class="font">装载吨位：{{ carItem.ybton  ? carItem.ybton: ' ' }}</view>
		
					<view class="font">来港：{{ carItem.fport  ? carItem.fport: ' ' }}</view>
					<view class="font">往港：{{ carItem.tport  ? carItem.tport: ' ' }}</view>
					<view class="font">船舶长度：{{ carItem.shiplength  ? carItem.shiplength: ' ' }}</view>
					<view class="font">船舶宽度：{{ carItem.shipwidth  ? carItem.shipwidth: ' ' }}</view>
					<view class="font">核定干舷：{{ carItem.freeboard  ? carItem.freeboard: ' ' }}</view>
					<view class="font">联系电话：{{ carItem.tel  ? carItem.tel: ' ' }}</view>
					<view class="font">满载吃水：{{ carItem.shipdraft  ? carItem.shipdraft: ' ' }}</view>
					<view class="font">船籍港：{{ carItem.shipregistport == null || carItem.shipregistport == undefined ? ' ' : carItem.shipregistport }}</view>
					<view class="font">船舶总吨：{{ carItem.shipregistport == null || carItem.shipregistport == undefined ? ' ' : carItem.shipregistport }}</view>
					<view class="font">参考载货量：{{ carItem.loadtonnage == null || carItem.loadtonnage == undefined ? ' ': carItem.loadtonnage }}</view>
					<view class="font">所有人：{{ carItem.shipoper == null || carItem.shipoper == undefined ? ' ' : carItem.shipoper }}</view>
					<view class="font">经营人：{{ carItem.shipcorp == null || carItem.shipcorp == undefined ? ' ' : carItem.shipcorp }}</view>
					
					<view class="font">实际控制人：{{ carItem.actualpeoper  ? carItem.actualpeoper: ' ' }}</view>
					<view class="font">MMSI码：{{ carItem.mmsicod  ? carItem.mmsicod: ' ' }}</view>
					<view class="font">建造日期：{{ carItem.shipbuilddate  ? carItem.shipbuilddate: ' ' }}</view>
					<view class="font">适航证有效期：{{ carItem.shzsyxq  ? carItem.shzsyxq: ' ' }}</view>
					<view class="font">船籍证有效期：{{ carItem.cjzsyxq  ? carItem.cjzsyxq: ' ' }}</view>
					<view class="font">前吃水：{{ carItem.beforeDraft  ? carItem.beforeDraft: ' ' }}</view>
					<view class="font">后吃水：{{ carItem.afterDraft  ? carItem.afterDraft: ' ' }}</view>
					<u-divider half-width="250" border-color="#6d6d6d">驳船附件</u-divider>
					<view class="picContent">
						<view v-for="(item, index) in fileDate1" :key="item.id" class="pic">
							<view style="text-align: center;">{{ item.name }}</view>
							<u-image @click="previewImage(item, index, 1)" :lazy-load="true" width="100px" height="100px" :src="item.url"></u-image>
						</view>
					</view>
					

					<u-divider half-width="250" border-color="#6d6d6d">申请附件</u-divider>
					<view class="picContent">
						<view v-for="item in fileDate2" :key="item.id" class="pic">
							<view style="text-align: center;">{{ item.name }}</view>
							<u-image @click="previewImage(item, index, 2)" :lazy-load="true" width="100px" height="100px" :src="item.url"></u-image>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-top-tips ref="uTips"></u-top-tips>
		<u-select mode="single-column" :list="shShowList" v-model="shShow" @confirm="shShowConfirm"
			value-name="value" label-name="name"></u-select>
		<u-select mode="single-column" :list="jsShowList" v-model="jsShow" @confirm="jsShowConfirm"
			value-name="value" label-name="name"></u-select>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: ['商务核销','待生产部核销', '已完成', '已废除'],
				current: 0, 
				orderList: [],
				tel: '',
				flag: false,
				level: '',
				department: '',
				portname: '',
				show: false,
				showInfo: false,
				title: '',
				content: '',
				obj: {},
				carItem: {},
				reason: '',
				fileDate1: [],
				pic1: [],	// 预览的图片
				pic2: [],
				fileDate2: [],
				jsShow: false,
				shShow: false,
				formData: {},
				shShowList: [
				    { name: '所有', value: '' },
				    { name: '待商务部审核', value: 1 },
				    { name: '待生产部核销', value: 2 },
				    { name: '已完成', value: 3 },
				    { name: '已废除', value: -1 }    
				],
				jsShowList: [
					{ name: '所有', value: '' },
				    { name: '待结算', value: 2 },
				    { name: '结算完成', value: 1 },
				    { name: '退款中', value: 3 },    
				    { name: '退款完成', value: 4 },
				    { name: '驳回', value: 5 }, 
				],
				customStyle: {
					height: '60rpx',
				}, 
				concat: ''
			};
		},
		onLoad(options) {
			//uni.getStorageSync("userInfo").mobile
			this.tel = uni.getStorageSync("userInfo").mobile
			this.getState1()
			this.power()
		},
		methods: {
			power() {
				uni.request({
					url: 'https://api.zlkj-port.com/ZLBG/zlkj/concat/getShipInfo/' + this.tel,
					method: 'get',
					success: (res) => {
						this.concat = res.data.remark
					}
				})
			},
			shShowConfirm(e) {
				this.formData.statusLabel = e[0].label
				this.formData.status = e[0].value
			},
			jsShowConfirm(e) {
				this.formData.payStatusLabel = e[0].label
				this.formData.payStatus = e[0].value
			},
			onSearch(){
				this.getState1()
			},
			previewImage(e, index, num) {
				uni.previewImage({
					// 需要预览的图片链接列表。若无需预览，可以注释urls
					urls: num == 1 ? this.pic1 : this.pic2,
					// 为当前显示图片的链接/索引值
					current: index,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					success: res => {
						console.log('previewImage res', res);
					},
					fail: err => {
						console.log('previewImage err', err);
					}
				});
			},
			toThrough(item) {
				console.log(item.payStatus)
				if (item.payStatus == '待结算') {
					// 未支付不可以操作
					this.$refs.uTips.show({
						title: '未支付不可以进行此操作',
						type: 'warning',
						duration: '2300'
					})
					return
				}
				if (item.payStatus == '退款中' || item.payStatus == '退款完成' || item.payStatus == '驳回') {
					this.$refs.uTips.show({
						title: '该报港单正在申请退款或者已退款或者已驳回，不能审核',
						type: 'warning',
						duration: '2300'
					})
					return
				}
				if (item.status == '已完成') {
				    this.$refs.uTips.show({
				    	title: '已经审核过了',
				    	type: 'warning',
				    	duration: '2300'
				    })
				    return
				}
				this.reason = ''
				this.obj = item
				this.show = true
				this.title = '生产部确定核销通过吗'
			},
			toThroughSW(item) {
				if (item.payStatus == '待结算') {
					// 未支付不可以操作
					this.$refs.uTips.show({
						title: '未支付不可以进行此操作',
						type: 'warning',
						duration: '2300'
					})
					return
				}
				if (item.payStatus == '退款中' || item.payStatus == '退款完成' || item.payStatus == '驳回') {
					this.$refs.uTips.show({
						title: '该报港单正在申请退款或者已退款或者已驳回，不能审核',
						type: 'warning',
						duration: '2300'
					})
					return
				}
				if(item.status == '已完成') {
					this.$refs.uTips.show({
						title: '已经审核过了！',
						type: 'warning',
						duration: '2300'
					})
					return
				}
				this.reason = ''
				this.obj = item
				this.show = true
				this.title = '商务部确定审核通过吗'
			},
			toParse(item) {
				if (item.payStatus == '待结算') {
					// 未支付不可以操作
					this.$refs.uTips.show({
						title: '未支付不可以进行此操作',
						type: 'warning',
						duration: '2300'
					})
					return
				}
				this.reason = ''
				this.obj = item
				this.show = true
				this.title = '确定作废吗'
			},
			toMoreInfo(item) {
				this.pic1 = []
				this.pic2 = []
				if(item.shipId) { 
					uni.request({
						url: 'https://api.zlkj-port.com/ZLBG/zlkj/bg_barge/getbargefilesdata',
						method: 'post',
						header: {
							'Content-Type': 'application/json;charset=UTF-8'
						},
						data: {
							bgBargeid: item.shipId,
							typ: '驳船'
						},
						success: (res) => {
							this.fileDate1 = JSON.parse(JSON.stringify(res.data))
							this.fileDate1.forEach(item => {
								this.pic1.push(item.url)
							})
						}
					})
				}
				
				uni.request({
					url: 'https://api.zlkj-port.com/ZLBG/zlkj/bg_barge/getbargefilesdata',
					method: 'post',
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					data: {
						bgBargeid: item.id,
						typ: '申请'
					},
					success: (res) => {
						this.fileDate2 = JSON.parse(JSON.stringify(res.data))
						this.fileDate2.forEach(item => {
							this.pic2.push(item.url)
						})
					}
				})
				uni.request({
					url: 'https://api.zlkj-port.com/ZLBG/zlkj/bargeapply/' + item.id,
					method: 'get',
					success: (res) => {
						this.carItem = res.data.data
						console.log(this.carItem)
					}
				})
				this.showInfo = true
			},
			throughConfirm() {
				if (this.title == '生产部确定核销通过吗') {
					uni.showLoading({
						title: '加载中...'
					})
					uni.request({
						// https://api.zlkj-port.com/cygjapi/zlzg/U/aHyxRVqcDVDUc8N?status=2&id=0&spbz=qwe
						url: 'https://api.zlkj-port.com/ZLBG/zlkj/bargeapply/checkbargeapply',
						method: "post",
						header: {
							'Content-Type': 'application/json;charset=UTF-8'
						},
						data: {
							id: this.obj.id,
							fcastId: this.obj.forecastId,
							bgId: this.obj.bgdId,
							cargoForecastId: this.obj.cargoForecastId,
							uname: this.concat
						},
						success: (res) => {
							console.log(res.data)
							this.getState1()
							this.$forceUpdate()
							this.$refs.uTips.show({
								title: '核销成功',
								type: 'success',
								duration: '2300'
							})
							uni.hideLoading()
						}
					})
				} else if (this.title == '商务部确定审核通过吗') {
					uni.showLoading({
						title: '加载中...'
					})
					uni.request({
						url: 'https://api.zlkj-port.com/ZLBG/zlkj/bargeapply/checkbargeapply2',
						method: "post",
						header: {
							'Content-Type': 'application/json;charset=UTF-8'
						},
						data: {...this.obj, ...{ uname: this.concat } },
						success: (res) => {
							console.log(res.data)
							if(res.data.code == 500) {
								this.$refs.uTips.show({
									title: res.data.msg,
									type: 'warning',
									duration: '2300'
								})
							} else {
								this.$refs.uTips.show({
									title: '审核成功',
									type: 'success',
									duration: '2300'
								})
							}
							this.getState1()
							this.$forceUpdate()
							uni.hideLoading()
						}
					})
				} else if (this.title == '确定作废吗') {
					uni.showLoading({
						title: '加载中...'
					})
					uni.request({
						url: 'https://api.zlkj-port.com/ZLBG/zlkj/bargeapply/repealbargeapply',
						method: "post",
						data: {
							id: this.obj.id,
							uname: this.concat
						},
						header: {
							'Content-Type': 'application/json;charset=UTF-8'
						},
						success: (res) => {
							console.log(res.data)
							this.getState1()
							this.$forceUpdate()
							this.$refs.uTips.show({
								title: '作废成功',
								type: 'success',
								duration: '2300'
							})
							uni.hideLoading()
						}
					})
				}
			},
			tapChange(index) {
				this.current = index
				if (index == 0) {
					this.getState1(1)
				} 
				if (index == 1) {
					this.getState1(2)
				}
				if (index == 2) {
					this.getState1(3)
				}
				if (index == 3) {
					this.getState1(-1)
				}
			},
			getState1() {
				uni.showLoading({
					title: '加载中...'
				})
				let params = {
				  pageNum: 1,
				  pageSize: 100,
				  status: this.formData.status,
				  payStatus: this.formData.payStatus,
				  applypeoper: this.formData.applypeoper,
				  bargenam: this.formData.bargenam,
				}
				if (!params.status) delete params.status
				if (!params.payStatus) delete params.payStatus
				if (!params.applypeoper) delete params.applypeoper
				if (!params.bargenam) delete params.bargenam
				
				uni.request({
					url: 'https://api.zlkj-port.com/ZLBG/zlkj/bargeapply/list',
					method: "get",
					data: params,
					success: (res) => {
						console.log(res.data)
						this.orderList = res.data.rows
						this.orderList.map(item => {
							if ( item.status == -1 ) {
								item.status = '已废除'
							} 
							else if ( item.status == 1 ) {
								item.status = '待商务部审核'
							}
							else if ( item.status == 2 ) {
								item.status = '待生产部核销'
							} else if (item.status == 3 ) {
								item.status = '已审核'
							} else if (item.status == 4) {
								item.status = '已消审'
							}
							
							if (item.payStatus == 1) {
								item.payStatus = '结算完成'
							} else if (item.payStatus == 2) {
								item.payStatus = '待结算'
							} else if (item.payStatus == 3) {
								item.payStatus = '退款中'
							} else if (item.payStatus == 4) {
								item.payStatus = '退款完成'
							} else if (item.payStatus == 5) {
								item.payStatus = '驳回'
							}
							return item
						})
						uni.hideLoading()
					}
				})
				
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}
	.headForm {
		padding: 20rpx;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background-color: #FFFFFF;
	
		.btnGroup {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 15rpx;
		}
	}
	.picContent {
	    display: flex;
	    flex-wrap: wrap;
	    overflow: auto;
	    // height: 400rpx;
	    justify-content: center;
	    .pic {
	      margin: 5px;
	    }
	  } 
	.font {
		margin: 5px 0;
		font-size: 16px;
	}
	::v-deep .u-form-item{
		padding: 10rpx 20rpx !important;
	}
	::v-deep .u-model__content__message {
		padding: 0 !important;
	}
	.btn {
		background-color: rgb(25, 190, 107); 
		color: #fff; 
		width: 150rpx;
		height: 55rpx;
		line-height: 55rpx;
		text-align: center;
		border-radius: 5px;
		margin-left: 10px;
	}

	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding: 20rpx;
			position: fixed;
			top: 0;
			width: 100%;
			// background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;
			margin-top: 100rpx;
			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #858585;
							font-size: 28rpx;
							margin-right: 50rpx;
							width: 195rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
